<template>
  <el-select
    v-model="value"
    :disabled="disabled"
    :size="size"
    :multiple="multiple"
    :filterable="filterable"
    :clearable="clearable"
    :collapse-tags="collapseTags"
    style="width: 100%;"
    @change="handleChange"
    :placeholder="plzSelect?$t('message.plzSelect'):(labelAll?labelAll:$t('common.text.all'))"
    :popper-class="showBar ? 'edu-dict-select' : ''"
  >
    <el-row class="select-tool-bar" v-if="showBar">
      <el-col :span="12">
        <el-button size="mini" @click="checkAll" style="width: 100%;">{{$t('common.btn.checkAll')}}</el-button>
      </el-col>
      <el-col :span="12">
        <el-button size="mini" @click="cancelAll" style="width: 100%;">{{$t('common.btn.cancelAll')}}</el-button>
      </el-col>
    </el-row>
    <el-option :label="$t('common.text.all')" value="" v-if="showAll"/>
    <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>

  import UTILS from "common/src/utils/utils";
  import { queryDic } from "common/src/api/dictionary";
  /**
   * 专业字典下拉框组件
   */
  export default {
    name: "MajorSelect",
    props: {
      value: {
        required: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      filterable: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: ''
      },
      clearable: {
        type: Boolean,
        default: true
      },
      collapseTags:{
        default: true
      },
      plzSelect: { // 用于展示placeholder的默认值 而不是 “全部”
        type: Boolean,
        default: false
      },
      labelAll: {
        type: String
      },
      showAll: {
        type: Boolean,
        default: false
      },
      faculty:{
        default: ''
      },
      clearOnFaculty:{
        default: true // 当学院有改变时要不要清空数据
      },
      showToolBar: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dataList:[]
      }
    },
    watch:{
      faculty: {
        handler: function(newVal, oldVal) {
          if(UTILS.isNotEmpty(newVal)){
            if(!_.isEqual(newVal, oldVal)) {
              // 学院改变后清空结果
              if(this.clearOnFaculty) {
                this.handleChange(this.multiple ? [] : null);
              }
              this.query(newVal);
            }
          }else{
            this.dataList = [];
            this.handleChange(this.multiple ? [] : null);
          }
        }
      },
      value(val, oldVal) {
      }
    },
    computed:{
      showBar(){
        return this.multiple && this.showToolBar;
      }
    },
    mounted() {
    },
    created() {
      if (this.multiple && !Array.isArray(this.value)) {
        this.$emit("input", []);
      }
      if (!this.multiple && Array.isArray(this.value)) {
        this.$emit("input", "");
      }
      if(UTILS.isNotEmpty(this.faculty)){
        this.query(this.faculty);
      }
    },
    methods: {
      handleChange(val){
        this.$emit("input", val);
        //if(!_.isEqual(this.value, val)) {
        this.$emit('change', val);
        //}
      },
      query(val){
        let params = {
          lang: this.$store.getters.language || "cn",
          type: "allChild",
          keys: ["G_ZY"],
          filter: {
            prefix: Array.isArray(val) ? val : [val] ,
            specilaCode: "XY2ZY"
          }
        };
        queryDic(params).then(res => {
          this.dataList = [];
          for (let key in res.data.G_ZY) {
            this.dataList.push({
              value: key,
              label: String(res.data.G_ZY[key])
            });
          }
          this.$emit('load-done', this.dataList);
        });
      },
      checkAll(){
        const val = [];
        _.forEach(this.dataList, (d)=>{
          val.push(d.value);
        });
        this.handleChange(val);
      },
      cancelAll(){
        this.handleChange([]);
      }
    }
  };

</script>

<style scoped>
</style>
